<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        nav {
            font-size: 1.5rem;
            background-color: #21D4FD;
            background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }

        h1 {
            font-size: 2rem;
            color: white;
        }

        li {
            margin: 10px 20px;
        }

        #searchBox {
            width: 300px;
            float: right;
        }
    </style>
</head>
<body>
<!-- nav 导航栏 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <!-- 外层ul--内嵌 li   无序列表 -->
    <ul class="navbar-nav">
        <li>
            <h1><a style="color: white; text-decoration: none" th:href="@{/}">博客管理系统</a></h1>
        </li>
        <li class="nav-item">
            <a class="nav-link active" th:href="@{/user/book/getAll}">图书信息</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/record/getOwnRecord}">借阅记录</a>
        </li>
    </ul>
    <div class="text-white" style="font-size: medium; position: absolute; bottom: 30px; right: 40px">
        <!-- 下拉框 -->
        <div class="dropdown">
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
               id="dropdownMenuButton"
               th:text="${session.name}+', 您好'"
               type="button">
            </a>
            <div aria-labelledby="dropdownMenuButton" class="dropdown-menu">
                <a class="dropdown-item" sec:authorize="hasRole('USER')" th:href="@{/user/toInfoPage}">个人信息</a>
                <a class="dropdown-item" th:href="@{/toChPwdPage}">修改密码</a>
                <a class="dropdown-item" th:href="@{/logout}">注销</a>
            </div>
        </div>
    </div>
</nav>

<div class="container" style="margin-top: 40px">
    <!-- form  带有一个输入字段和一个提交按钮的 HTML 表单-->
    <form id="searchBox" th:action="@{/user/book/search}">
        <div class="input-group">
            <!-- 这个input标签中 placeholder="输入关键词..." 属性表示该标签输入框中的灰色默认值为 "输入关键词..." -->
            <input class="form-control" name="keyword" placeholder="输入关键词..." type="text">
            <!-- 这个input标签中 type="submit" 为表示一个提交按钮 名称为 "搜索"-->
            <input class="input-group-append btn btn-success" type="submit" value="搜  索">
        </div>
    </form>
    <div style="clear: both"></div>
    <!-- table标签表示为  HTML 表格 -->
    <table class="table table-hover" style="margin-top: 20px">
        <!-- thead 标签用于组合 HTML 表格的表头内容,其中元素内部必须包含一个或者多个 <tr> 标签-->
        <!-- <thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。-->
        <thead>
        <!-- <tr> 标签定义 HTML 表格中的行。-->
        <!-- 下面一个tr表示了,一行6列的表格-->
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>ISBN</th>
            <th>价格</th>
            <th></th>
        </tr>
        </thead>
        <!-- tbody 标签用于组合 HTML 表格的主体内容 ,<tbody> 元素内部必须包含一个或者多个 <tr> 标签-->
        <tbody>
        <tr th:each="book, bookStat: ${books}">
            <td th:text="${book.getName()}"></td>
            <td th:text="${book.getAuthor()}"></td>
            <td th:text="${book.getPublish()}"></td>
            <td th:text="${book.getIsbn()}"></td>
            <td th:text="${book.getPrice()}"></td>
            <td><a class="btn btn-outline-success" th:href="@{'/user/book/info/' + ${book.getBookId()}}">详情</a></td>
            <!-- 借阅触发事件,判断 书本的状态,当书本的状态为1表示在馆,0表示缺货-->
            <!-- 当状态为1,去发送请求后端url, 当状态为0不请求url,弹出状态框为书本缺货-->
            <!-- 给-->
            <!--<td><a class="btn btn-outline-info" href="javascript:void(0)" id="borrow" onclick="function f(,) {-->
            <!--     // let state = document.getElementById('bookState');-->
            <!--     // let $borrow = document.getElementById('borrow');-->
            <!--     // let $router = document.getElementById('router');-->
            <!--    let $borrow = document.getElementsByName(this);-->
            <!--    let state = document.getElementsByName(this).nextSibling;-->
            <!--    let $router = document.getElementsByName(this).nextSibling.nextSibling;-->

            <!--     console.log(state+'-&#45;&#45;&#45;&#45;'+'$borrow'+'$router');-->
            <!--     if (state.innerText === '0') {-->
            <!--        alert('书本已缺货!');-->
            <!--    } else {-->
            <!--        // $borrow.setAttribute(href, '/user/book/borrow/' + $router);-->
            <!--        $borrow.href='/user/book/borrow/' + $router;-->
            <!--    }-->
            <!--}"-->
            <!--       th:id="${book.getBookId()}">借阅-->
            <td>
                <a class="btn btn-outline-info"
                   th:href="@{'/user/book/borrow/' + ${book.getBookId()} +'/' +${session.username}}"
                   th:if="${book.getState()==1} ">借阅
                </a>
                <a class="btn btn-outline-danger" th:if="${book.getState()==0} ">缺货</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>